<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--<link rel="stylesheet" href="stylesheets/layui.css"  media="all">-->
    <!--<script src="javascripts/jquery-3.3.1.js"></script>-->
    <!--<script src="layui/layui.js" charset="utf-8"></script>-->
    <script src="http://code.jquery.com/jquery-1.4.1.js"></script>
    <link rel="stylesheet" href="https://heerey525.github.io/layui-v2.4.3/layui-v2.4.5/css/layui.css"  media="all">
    <script src="https://hanlei.online/layui-v2.4.3/layui-v2.4.5/layui.js"></script>

    <script>
        layui.use('element', function(){
            var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

            //监听导航点击
            element.on('nav(demo)', function(elem){
                //console.log(elem)
                layer.msg(elem.text());
            });
        });
        function openModak(){
            $("[name='testname']").val("xxxxxxxxxxxxxxx");//向模态框中赋值
            layui.use(['layer'],function () {
                var layer = layui.layer,$=layui.$;
                layer.open({
                    type:1,//类型
                    area:['400px','300px'],//定义宽和高
                    title:'查看详细信息',//题目
                    shadeClose:false,//点击遮罩层关闭
                    content: $('#motaikunag')//打开的内容
                });
            })
        }
    </script>
</head>
<body>
<!--
    <div style="padding-top: 20px;padding-left: 10px">
        <div>横轴<button title="添加" style="float: right" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-primary"><i class="layui-icon ">+</i></button></div>
            <ul class="list-group">
            <li class="list-group-item">姓名</li>
        </ul>
        <br>
        <h5>纵轴</h5>
        <ul class="list-group">
            <li class="list-group-item"></li>
        </ul>
        <br>
        <h5>分组</h5>
        <ul class="list-group">
            <li class="list-group-item"></li>
        </ul>
        <br>
    </div>
    -->
        <ul class="layui-nav layui-nav-tree layui-inline layui-bg-green" lay-filter="demo" style="margin-right: 10px;">
            <li class="layui-nav-item layui-nav-itemed">
                <span>横轴</span>
                <button title="删除" style="float: right" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-warm"><i class="layui-icon">-</i></button>
                <button title="添加" style="float: right" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-warm"><i class="layui-icon ">+</i></button>
                <dl class="layui-nav-child">
                    <dd><a href="">姓名</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item layui-nav-itemed">
                <span>纵轴</span>
                <button title="删除" style="float: right" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-warm"><i class="layui-icon ">-</i></button>
                <button title="添加" style="float: right" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-warm"><i class="layui-icon ">+</i></button>
                <dl class="layui-nav-child">
                    <dd><a href="">年龄</a></dd>
                </dl>
            </li>
        </ul>
    <button type="button" onclick="openModak()">开启模态框</button>
    <!--模仿bootstrap的模态框-->
    <div id="motaikunag" style="display: none;">
        <div class="layui-row">
            <div class="layui-col-md9">
                你的内容 9/12
            </div>
            <div class="layui-col-md3">
                你的内容 3/12
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-md3">
                名字
            </div>
            <div class="layui-col-md9">
                <input type="text" name="testname" value="">
            </div>
        </div>

        <br/>
        <input type="button" onclick="javascript:alert('点击按钮')" title="点我" value="点我">
    </div>
</body>
</html>